<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="150px">
          <!-- 所在部门 -->
          <el-row>
            <el-col :span="8">
              <el-form-item
                :label="employeeStore.types == 'del' ? '离职部门' : '所在部门'"
                prop="dept_id"
              >
                <el-cascader
                  style="width: 380px"
                  :options="cascaderOptions"
                  v-model="selectedOptions"
                  @change="handleCascaderChange"
                  :props="{ checkStrictly: true, expandTrigger: 'click' }"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <!-- 姓名 -->
            <el-col :span="8">
              <el-form-item label="姓名" prop="username">
                <el-input
                  v-model="userInfo.username"
                  class="inputW"
                  placeholder="请输入姓名"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 工号 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="工号" prop="workNumber">
                <!-- 工号是系统生成的  禁用这个组件   :disabled="employeeStore.types == 'Edit' ? true : false"-->
                <el-input
                  type="text"
                  v-model="userInfo.workNumber"
                  class="inputW"
                  placeholder="请输入工号"
                />
              </el-form-item>
            </el-col>

            <!--手机  -->

            <el-col :span="8">
              <el-form-item label="手机" prop="mobile">
                <el-input
                  type="text"
                  v-model="userInfo.mobile"
                  :disabled="employeeStore.types == 'Edit' ? true : false"
                  class="inputW"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 邮箱 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="userInfo.email"
                  class="inputW"
                  placeholder="请输入邮箱地址"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="聘用形式" prop="typeOfEmployment">
                <el-select v-model="userInfo.typeOfEmployment" class="inputW">
                  <el-option :value="1" label="全职" />
                  <el-option :value="2" label="兼职" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="工作地点" prop="locattionOfWork">
                <el-select v-model="userInfo.locattionOfWork" class="inputW">
                  <el-option :value="1" label="办公室" />
                  <el-option :value="2" label="门店" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                v-if="!is_secrecyflac || !is_secrecy"
                label="基本薪资"
                prop="basic_salary"
              >
                <!-- !is_secrecy|| -->
                <el-input
                  v-model="userInfo.basic_salary"
                  type="number"
                  style="width: 180px"
                  placeholder="请输入薪资数额"
                />
                <el-checkbox
                  :disabled="is_secrecyflac"
                  v-model="is_secrecy"
                  style="margin-left: 20px"
                  >保密</el-checkbox
                >
              </el-form-item>
              <el-form-item v-else label="基本薪资">
                <!-- !is_secrecy|| -->
                <el-input
                  value="********"
                  :disabled="true"
                  style="width: 220px"
                  placeholder="请输入薪资数额"
                />
                <el-checkbox
                  :disabled="is_secrecyflac"
                  v-model="is_secrecy"
                  style="margin-left: 20px"
                  >保密</el-checkbox
                >
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="带教老师" prop="teacher_id">
                <el-input
                  v-show="false"
                  v-model="userInfo.teacher_id"
                  type="text"
                  style="width: 390px"
                  placeholder="带教老师"
                />
                <el-button type="primary" plain @click="demoo" style="width: 380px">{{
                  teachname == "" || teachname == undefined ? "请选择带教老师" : teachname
                }}</el-button>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="是否清洁工" prop="is_cleaner">
                <el-radio-group v-model="userInfo.is_cleaner">
                  <el-radio :value="1">是</el-radio>
                  <el-radio :value="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="是否试用期" prop="is_trial">
                <el-radio-group v-model="userInfo.is_trial">
                  <el-radio :value="1">是</el-radio>
                  <el-radio :value="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="入职日期" prop="timeOfEntry">
                <el-date-picker
                  v-model="userInfo.timeOfEntry"
                  class="inputW"
                  format="YYYY-MM-DD"
                  placeholder="选择日期"
                  :clearable="false"
                  type="date"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="转正日期" prop="confirm_date">
                <el-date-picker
                  v-model="userInfo.confirm_date"
                  class="inputW"
                  format="YYYY-MM-DD"
                  placeholder="选择日期"
                  :clearable="false"
                  type="date"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="身份证号" prop="id_card">
                <el-input
                  type="text"
                  v-model="userInfo.id_card"
                  class="inputW"
                  placeholder="请输入身份证号"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="银行账号" prop="bank_account">
                <el-input
                  type="text"
                  v-model="userInfo.bank_account"
                  class="inputW"
                  placeholder="请输入银行账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行名字" prop="bank_name">
                <el-input
                  type="text"
                  v-model="userInfo.bank_name"
                  class="inputW"
                  placeholder="请输入银行名字"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="职位" prop="position">
                <el-input
                  type="text"
                  v-model="userInfo.position"
                  class="inputW"
                  placeholder="请输入职位名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="employeeStore.types == 'del'">
              <el-form-item label="离职日期" prop="leave_date">
                <el-date-picker
                  v-model="userInfo.leave_date"
                  class="inputW"
                  format="YYYY-MM-DD"
                  placeholder="选择日期"
                  :clearable="false"
                  type="date"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 保存个人信息 -->
          <el-row type="flex">
            <el-col :span="8"> </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="saveData" style="width: 300px">{{
                  employeeStore.types == "del" ? "确认离职" : "保存更新"
                }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!--    部门和人员选择对话框-->
    <el-dialog
      v-model="addPeoplefalck"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      title="选择部门与人员"
      center
      width="560"
    >
      <div class="dialog">
        <div class="dialog-left">
          <div class="left">
            <!-- 树形组件 -->
            <el-table
              v-loading="departmentStore.loading"
              :data="departmentStore.departmentList"
              element-loading-text="加载中..."
              row-key="selfid"
              border
              default-expand-all
              :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }"
              style="height: 100%; overflow: hidden"
            >
              <OrganizationNameColumn
                v-if="drawerVisible"
                selectable="false"
                hoverable="true"
                @select="selectNode"
                widths="50px"
              />
            </el-table>
          </div>
        </div>
        <div class="dialog-right">
          <el-table
            ref="employeeTable"
            :data="employeeData"
            style="width: 100%"
            @cell-click="handleSelectionChange"
          >
            <el-table-column type="index" width="30" />
            <el-table-column prop="staffPhoto" align="center" label="头像">
              <template v-slot="{ row }">
                <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="30" />
                <span v-else class="username">{{ row.username.charAt(0) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="姓名" />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from "vue";
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  FormRules,
} from "element-plus";
import {
  addUserInfo,
  updateUserInfo,
  getemail,
  deleteUserInfo,
  getUserInfo,
} from "@/api/employee";
import { useRoute, useRouter } from "vue-router";
import { useEmployeeStore } from "@/stores/employee"; // 引入 Pinia store

const route = useRoute();
const router = useRouter();
const is_secrecyflac = ref(false);
const is_secrecy = ref(false);

import { useDepartmentStore } from "@/stores/department";
const departmentStore = useDepartmentStore();

// 定义初始状态
const initialUserInfo = {
  dept_name: "", //所在部门
  username: "", // 用户名
  email: "", //邮箱
  mobile: "", // 手机号
  workNumber: "", // 工号
  userid: "",
  typeOfEmployment: 0, // 聘用形式
  locattionOfWork: "", // 工作地点
  dept_id: "", // 部门id
  timeOfEntry: "", // 入职时间
  basic_salary: "", //基础工资
  confirm_date: "", //转正日期
  teacher_id: "", //带教老师
  is_cleaner: "", //是否清洁工
  is_trial: 0, //是否试用
  leave_date: "", //离职日期
  id_card: "", //身份证号
  bank_account: "", //银行账号
  bank_name: "", //银行名字
  position: "", //职位
};

const userInfo: {
  dept_name?: string;
  username?: string;
  mobile?: string;
  email?: string;
  workNumber?: string;
  typeOfEmployment?: any;
  locattionOfWork?: any;
  timeOfEntry?: any;
  dept_id?: any;
  id?: any;
  userid?: any;
  confirm_date?: any;
  basic_salary?: any;
  is_cleaner?: any;
  teacher_id?: any;
  is_trial?: any;
  teacher_name?: any;
  id_card?: any;
  bank_account?: any;
  bank_name?: any;
  position?: any;
  is_secrecy?: any;
  leave_date?: any; //离职日期
} = reactive({ ...initialUserInfo });
const isEdit = ref<Boolean>(false);

// 初始化响应式变量
const selectedOptions = ref([]); // 存储用户选择的结果
const cascaderOptions = ref(<any>[]); //遍历数据
// 部门连级选择器
const demoo = () => {
  addPeoplefalck.value = !addPeoplefalck.value;
  drawerVisible.value = true;
};

// 弹框的控制
const drawerVisible = ref(false);
//添加人员按钮弹框
const addPeoplefalck = ref(false);

//左边显示员工数据
const employeeData = ref(<Array<unknown> | any>[]);

// 存储查询参数，记录节点
const queryParams = reactive({
  id: 0,
  page: 1, //当前页
  pagesize: 10,
  keyword: "",
});
const employeeTable = ref(null); // 为 el-table 绑定 ref
//切换节点
const selectNode = async (node: any) => {
  queryParams.id = node.selfid; //重新记录参数
  queryParams.page = 1; //设置第一页
  getUserData();
};

//获取员工表格数据
const getUserData = async () => {
  const res = await getUserInfo(queryParams.id);
  // console.log(res);
  // console.log(userInfo);

  employeeData.value = [];
  res.data.forEach((item: any) => {
    if (
      item.userid != null &&
      item.userid != "" &&
      item.status == "已激活" &&
      userInfo.userid !== item.userid
    ) {
      employeeData.value.push(item);
    }
  });
};

// 带教老师回显名字
const teachname = ref("");
//人员表格选择监听
const handleSelectionChange = (selection: any, row: any) => {
  if (selection) {
    userInfo.teacher_id = selection.userid;
    // console.log(selection);
    teachname.value = selection.username;
  }
  addPeoplefalck.value = false;
};

interface CascaderOption {
  value: string;
  label: string;
  children?: CascaderOption[];
}

// 定义转换函数生成部门选项
function transformDataForCascader(data: any): CascaderOption {
  return data.map((item: { selfid: any; dept_name: any; childs: string | any }) => ({
    value: `${item.selfid}-${item.dept_name}`,
    label: item.dept_name,
    children:
      item.childs && item.childs.length
        ? transformDataForCascader(item.childs as any)
        : null,
  }));
}

// 定义改变事件处理器
const handleCascaderChange = (value: string | any) => {
  if (value.length > 0) {
    const departments = value[value.length - 1].toString().split("-");
    userInfo.dept_id = departments[0];
    userInfo.dept_name = departments[1];
  }
  // console.log("Selected:", value); // 输出选中的 selfid 数组
};

const employeeStore = useEmployeeStore(); // 创建 store 实例

// 表单引用
const userForm = ref<InstanceType<typeof ElForm>>();

const olldemail = ref();

onMounted(async () => {
  await departmentStore.fetchDepartmentList();
  const departments = departmentStore.departmentList;
  cascaderOptions.value = transformDataForCascader(departments[0].childs);

  const employeeInfo: {
    dept_name?: string;
    username?: string;
    mobile?: string;
    email?: string;
    workNumber?: string;
    typeOfEmployment?: any;
    locattionOfWork?: any;
    timeOfEntry?: any;
    dept_id?: any;
    id?: any;
    userid?: any;
    confirm_date?: any;
    basic_salary?: any;
    is_cleaner?: any;
    teacher_id?: any;
    is_trial?: any;
    teacher_name?: any;
    id_card?: any;
    bank_account?: any;
    bank_name?: any;
    position?: any;
    is_secrecy?: any;
    leave_date?: any; //离职日期
  } = employeeStore.employeeInfo; // 从 Pinia store 获取员工信息

  if (employeeStore.types == "Edit" || employeeStore.types == "del") isEdit.value = true;
  if (employeeInfo) {
    userInfo.dept_name = employeeInfo.dept_name || "";
    userInfo.username = employeeInfo.username || "";
    userInfo.mobile = employeeInfo.mobile || "";
    userInfo.email = employeeInfo.email || "";
    olldemail.value = employeeInfo.email || "";
    userInfo.workNumber = employeeInfo.workNumber || "";
    userInfo.typeOfEmployment = Number(employeeInfo.typeOfEmployment) || "";
    userInfo.locattionOfWork = (Number(employeeInfo.locattionOfWork) as unknown) || "";
    userInfo.timeOfEntry =
      employeeInfo.timeOfEntry != "None" ? employeeInfo.timeOfEntry : "";
    userInfo.dept_id = employeeInfo.dept_id || "";
    userInfo.id = employeeInfo.id || "";
    userInfo.userid = employeeInfo.userid || "";
    userInfo.confirm_date =
      employeeInfo.confirm_date != "None" ? employeeInfo.confirm_date : "";
    userInfo.basic_salary = employeeInfo.basic_salary || "";
    userInfo.is_cleaner = employeeInfo.is_cleaner;
    userInfo.teacher_id = employeeInfo.teacher_id;
    userInfo.is_trial = employeeInfo.is_trial;
    teachname.value = employeeInfo.teacher_name;
    userInfo.id_card = employeeInfo.id_card || "";
    userInfo.bank_account = employeeInfo.bank_account || "";
    userInfo.bank_name = employeeInfo.bank_name || "";
    userInfo.position = employeeInfo.position || "";
  }

  if (employeeStore.types == "del") {
    selectedOptions.value = [];
    userInfo.dept_id = "";
    userInfo.dept_name = "";

    departments[0].childs.forEach((item) => {
      if (item.selfid == 983215546) {
        userInfo.dept_id = item.selfid;
        userInfo.dept_name = item.dept_name;
        selectedOptions.value.push(`${item.selfid}-${item.dept_name}` as never);
      }
    });

    //  userInfo.dept_id = datas[0];
    // userInfo.dept_name = datas[1];
  } else {
    //部门联级选择器返回上一级菜单进行回显
    function findAncestorDepts(
      depts: {
        id: number;
        selfid: number;
        dept_name: string;
        pid: number;
        childs: /*elided*/ any[];
        type?: any;
      }[],
      childDeptName: string | undefined
    ) {
      function recurse(departments: any, path = []) {
        for (let dept of departments) {
          // 如果当前部门是目标子部门，则返回路径加上当前部门
          if (dept.dept_name === childDeptName) {
            return [...path, dept];
          }
          // 如果当前部门有子部门，则递归查找
          if (dept.childs && dept.childs.length > 0) {
            let result:any = recurse(dept.childs, [...path as never, dept as never]);
            if (result.length > 0) {
              return result;
            }
          }
        }
        // 如果没有找到目标子部门，返回空数组
        return [];
      }
      // 调用递归函数开始搜索
      let foundPath = recurse(depts);
      // 返回所有层级的部门信息，如果有的话
      return foundPath;
    }

    let deptval = ref([]);
    departments[0].childs.forEach((item) => {
      deptval.value.push(item.dept_name as never);
    });
    teachname.value = "";
    selectedOptions.value = [];
    if (deptval.value.indexOf(employeeInfo.dept_name as never) == -1) {
      const datadep = findAncestorDepts(departments[0].childs, employeeInfo.dept_name);
      datadep.forEach((item: { selfid: any; dept_name: any }) => {
        selectedOptions.value.push(`${item.selfid}-${item.dept_name}` as never);
      });
    } else {
      selectedOptions.value.push(
        `${employeeInfo.dept_id}-${employeeInfo.dept_name}` as never
      );
    }
  }

  if (employeeInfo.is_secrecy == "1") {
    is_secrecy.value = true;
  } else {
    is_secrecy.value = false;
  }

  const isadmin = localStorage.getItem("username");
  if (isadmin == "admin") {
    is_secrecyflac.value = false;
  } else {
    is_secrecyflac.value = true;
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  workNumber: [
    {
      // required: employeeStore.types == "Edit" ? false : true,
      required: true,
      message: "请输入工号",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: employeeStore.types == "Edit" ? false : true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱号", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱格式",
      trigger: ["blur", "change"],
    },
  ],
  mobiles: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    // { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  typeOfEmployment: [{ required: true, message: "请选择聘用形式", trigger: "blur" }],
  locattionOfWork: [{ required: true, message: "选择工作地点", trigger: "blur" }],
  dept_id: [{ required: true, message: "请选择部门", trigger: "blur" }],
  timeOfEntry: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
  is_cleaner: [{ required: true, message: "请选择是或者否", trigger: "blur" }],
  basic_salary: [{ required: true, message: "请输入薪资数额", trigger: "blur" }],
  confirm_date: [{ required: true, message: "请输转正时间", trigger: "blur" }],
  teacher_id: [{ required: false, message: "请选择带教老师", trigger: "blur" }],
  is_trial: [{ required: true, message: "是否试用期", trigger: "blur" }],
  leave_date: [{ required: true, message: "请选择离职日期", trigger: "blur" }],
  id_card: [{ required: true, message: "身份证号不能为空", trigger: "blur" }],
  bank_account: [{ required: true, message: "银行账号不能为空", trigger: "blur" }],
  bank_name: [{ required: true, message: "银行名字不能为空", trigger: "blur" }],
  position: [{ required: true, message: "职位不能为空", trigger: "blur" }],
});

// // 转换数据结构以适应 el-select，并且包含子项
// const transformDepartmentList = (data: any[]) =>
//   data.map(({ selfid, shop_name, childs }) => ({
//     value: selfid,
//     label: shop_name,
//     children:
//       Array.isArray(childs) && childs.length ? transformDepartmentList(childs) : null,
//   }));

//重置表单数据
const reset = () => {
  Object.assign(userInfo, initialUserInfo);

  if (userForm.value) {
    userForm.value.resetFields();
  }
};

//时间大小比较
function compareDates(dateString1: any, dateString2: any) {
  // 创建 Date 对象
  const date1 = new Date(dateString1);
  const date2 = new Date(dateString2);

  // 检查是否成功创建了有效的 Date 对象
  if (date1.toString() === "Invalid Date" || date2.toString() === "Invalid Date") {
    console.error("Invalid date provided");
    return false;
  }

  // 返回布尔值：如果 date1 小于 date2，则为 true；否则为 false
  return date1 < date2;
}

//保存按钮
const saveData = async () => {
  if (!userForm.value) return;

  if (is_secrecy.value) {
    userInfo.is_secrecy = 1;
  } else {
    userInfo.is_secrecy = 0;
  }

  const isadmin = localStorage.getItem("username");
  if (isadmin != "admin") {
    delete userInfo.is_secrecy;
  }

  if (employeeStore.types != "del") {
    delete userInfo.leave_date;
  }
  // console.log(userInfo);

  userForm.value.validate(async (valid) => {
    if (valid) {
      //编辑和删除操作
      if (isEdit.value == true) {
        try {
          if (employeeStore.types == "Edit") {
            if (!compareDates(userInfo.timeOfEntry, userInfo.confirm_date)) {
              ElMessage.error("入职时间不能大于转正时间");
              return;
            }

            if (olldemail.value != userInfo.email) {
              const emailres = await getemail(userInfo.email);
              if (emailres.code != "200") {
                ElMessage.error(emailres.msg);
                return;
              }
            }
            const res = await updateUserInfo(userInfo);
            if (res.code == "200") {
              ElMessage.success("修改成功");
              reset();
              router.push("/employeeManage");
            } else {
              ElMessage.error("修改失败");
            }
          } else {
            if (!compareDates(userInfo.timeOfEntry, userInfo.leave_date)) {
              ElMessage.error("离职时间不能早于入职时间");
              return;
            }

            await updateUserInfo(userInfo);
            const res = await deleteUserInfo({ userid: userInfo.userid });
            if (res.code == "200") {
              ElMessage.success("离职成功");
              reset();
              router.push("/employeeManage");
            } else {
              ElMessage.error("离职失败");
            }
          }
        } catch (error) {
          ElMessage.error("修改失败");
          console.error("修改失败", error);
        }
      } else {
        //新增操作
        const { id, ...payload } = userInfo;
        const params = { ...payload };
        try {
          const emailres = await getemail(userInfo.email);
          if (emailres.code != '200') {
            ElMessage.error(emailres.msg);
            return;
          }
          const res = await addUserInfo(params);
          if (res.code == "200") {
            ElMessage.success("新增成功");
            reset();
            router.push("/employeeManage");
          } else {
            ElMessage.error(res.msg);
          }
        } catch (error) {
          ElMessage.error("新增失败");
          console.error("新增失败", error);
        }
      }
    } else {
      ElMessage.error("请检查表单信息");
    }
  });
};
</script>
<style lang="scss" scoped>
.edit-form {
  background: #fff;
  padding: 20px;

  .inputW {
    width: 380px;
  }
}

// 修改抽屉自定义样式

.username {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: lightblue;
  border-radius: 50%;
  font-size: 14px;
  color: #909399;
}

.dialog {
  height: 380px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.dialog-left {
  height: 350px;
  width: 220px;
  transform: scale(1);
  overflow-y: auto;
  /* 添加垂直滚动条 */
  border: 1px solid #dcdfe6;
  /* 可选：添加边框以区分容器 */
  background-color: #fff;
  /* 可选：设置背景颜色 */
}

.dialog-leftqw,
.dialog-right {
  height: 350px;
  width: 300px;
  overflow-y: auto;
  /* 添加垂直滚动条 */
  border: 1px solid #dcdfe6;
  /* 可选：添加边框以区分容器 */
  background-color: #fff;
  /* 可选：设置背景颜色 */
}

.dialog-leftqw {
  margin-left: 40px;
}

.button-content {
  display: flex;
  flex-direction: row;
  justify-content: right;
}

.renyuan {
  cursor: not-allowed;
  background-color: #f5f7fa;
  margin-top: 8px;
  border: 1px solid #e8e8e8;
  padding-left: 8px;
  padding-right: 8px;
  height: 40px;
  width: 350px;
  line-height: 40px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
